<template>
    <div>
        <Card class="search" shadow>
            <Input prefix="ios-contact" placeholder="Enter name" style="width: auto" />
        </Card>
        <Card shadow>
            <div class="tb-header">
                <RefreshButton :refreshList="getTableData"></RefreshButton>
            </div>

            <Table :height="400" size="small" :columns="columns" :data="tableData">
                <template slot-scope="{ row, index }" slot="action">
                    <Button disabled type="primary" size="small" style="margin-right: 5px">编辑</Button>
                    <Button disabled type="error" size="small" style="margin-right: 5px">删除</Button>
                </template>
            </Table>

            <Pagination
                    ref="pagination"
                    size="small"
                    :sizer="true"
                    :page.sync="listQuery.pageNumber"
                    :rows.sync="listQuery.pageSize"
                    :total="total"
                    @on-change="getTableData"/>
        </Card>
    </div>
</template>

<script>
    import {findPage} from '@/api/dict';
    import Pagination from '../components/Pagination' // 分页插件
    import RefreshButton from '../components/RefreshButton' // 分页插件

    export default {
        name: "Dict",
        components: {
            Pagination,RefreshButton
        },
        data() {
            return {
                columns: [
                    {
                        title: '编码',
                        key: 'code'
                    },
                    {
                        title: '字典名称',
                        key: 'name'
                    },
                    {
                        title: 'KEY',
                        key: 'vkey'
                    },
                    {
                        title: '选项值',
                        key: 'value'
                    },
                    {
                        title: '排序',
                        key: 'sort'
                    },
                    {
                        title: '备注',
                        key: 'note'
                    },
                    {
                        title: '状态',
                        key: 'status',
                        render: (h, params) => {
                            return h('span', params.row.status == '0' ? '禁用' : '启用')
                        }
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ],
                tableData: [],
                listQuery: {
                    pageNumber: 1,
                    pageSize: 10
                },
                total: 0,
            }
        },
        created(){
            this.getTableData();
        },
        methods: {
            async getTableData() {
                this.tableData = [];
                this.total = 0;
                let params = this.listQuery
                let res = await findPage(params);
                if (res.success) {
                    this.tableData = res.result.records;
                    this.total = res.result.total;
                }
            }
        }
    }
</script>

<style scoped>

</style>
